<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="#"/>
    <link type="text/css" rel="styleSheet" href="../../../Clcss/regist.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号登录</title>
</head>
<body>
<div id="bg">
    <div id="hint"><!-- 提示框 -->
        <p>登录失败</p>
    </div>
    <div id="login_wrap">
        <div id="login"><!-- 登录注册切换动画 -->
            <div id="status">
                <i style="top: 35px">Log</i>
                <i style="top: 0">Sign</i>
                <i style="right: 5px">in</i>
            </div>
            <span>
                    <form action="post">
                        <p class="form"><input type="text" id="user" placeholder="username"></p>
                        <p class="form"><input type="password" id="passwd" placeholder="password"></p>
                        <p class="form confirm"><input type="password" id="confirm-passwd"
                                                       placeholder="confirm password"></p>
                        <p class="form nickname"><input type="text" id="nickname" placeholder="nickname"></p>
                        <input type="button" value="Log in" class="btn" onclick="login()" style="margin-right: 20px;">
                        <input type="button" value="Sign in" class="btn" onclick='signin()' id="btn">
                    </form>
                    <a href="#">Forget your password?</a>
                </span>
        </div>

        <div id="login_img"><!-- 图片绘制框 -->
            <span class="circle">
                    <span></span>
                    <span></span>
                </span>
            <span class="star">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            <span class="fly_star">
                    <span></span>
                    <span></span>
                </span>
            <p id="title">CLOUD</p>
        </div>
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script>
    var onoff = false//根据此布尔值判断当前为注册状态还是登录状态
    var confirm = document.getElementsByClassName("confirm")[0]
    var user = document.getElementById("user")
    var passwd = document.getElementById("passwd")
    var con_pass = document.getElementById("confirm-passwd");
    var nickname = document.getElementById("nickname")
    //自动居中title
    confirm.style.height = 51 + "px";
    var hit = document.getElementById("hint");
    nickname.style.display = "block";
    var name_c = document.getElementById("title")
    name = name_c.innerHTML.split("")
    name_c.innerHTML = "";
    for (i = 0; i < name.length; i++)
        if (name[i] != ",")
            name_c.innerHTML += "<i>" + name[i] + "</i>"

    //引用hint()在最上方弹出提示
    function hint() {
        var hit = document.getElementById("hint");
        hit.style.display = "block";
        setTimeout("hit.style.opacity = 1", 0)
        setTimeout("hit.style.opacity = 0", 2000)
        setTimeout('hit.style.display = "none"', 3000)
    }

    //回调函数
    function submit(callback) {

        console.log("submit");
        if (passwd.value == con_pass.value) {
            /*var request = new XMLHttpRequest()
            var url = "/cl/doRegist";
            // var url = "/cl/doRegist?username="+user.value+"&password="+passwd.value+"&nickname="+nickname.value;
            request.open("post", url, true)
            var data = new FormData();
            data.append("username", user.value)
            console.log(user.value);
            data.append("password", passwd.value);
            data.append("nickname", nickname.value);
            console.log(passwd.value);
            console.log(nickname.value);
            console.log("dasdasdasdasdasas");
            console.log(data);
            request.onreadystatechange = function () {
                if (this.readyState == 4) {
                    console.log("bbbbbbbbbbbbbbbbb");
                    callback.call(this, this.response)
                    console.log(this.responseText)
                }
            }*/
            var json = {
                username: user.value,
                password: passwd.value,
                nickname: nickname.value
            }
            $.ajax({
                type: 'POST',
                url: '/cl/doRegist',
                data: JSON.stringify(json),
                contentType: "application/json",
                method: "POST",
                success: function (data) {
                    if (data.code == 1) {
                        hit.innerHTML = "注册成功两秒后跳转至首页";
                        setTimeout("window.location.href='/cl/firstpage'", 2000)
                    } else {
                        hit.innerHTML = "注册失败或用户名已存在";
                    }
                    hint()
                }
            })
            request.send(data)
        } else {
            hit.innerHTML = "两次密码不同"
            hint();
        }
    }

    //注册按钮
    function signin() {

        var status = document.getElementById("status").getElementsByTagName("i")
        var hit = document.getElementById("hint").getElementsByTagName("p")[0]
        console.log("aaaaaaaaaaaaaaaaaaaa");
        if (onoff) {
            nickname.style.display = "block";
            confirm.style.height = 51 + "px";
            status[0].style.top = 35 + "px";
            status[1].style.top = 0;
            onoff = !onoff
            /*nickname.style.display = "block";
            confirm.style.height = 51 + "px"
            status[0].style.top = 35 + "px"
            status[1].style.top = 0
            onoff = !onoff*/
        } else {
            if (passwd.value != con_pass.value)
                hit.innerHTML = "两次密码不相等"
            else if (passwd.value = con_pass.value) {
                submit(function (res) {
                    if (res.code == 0)
                        hit.innerHTML = "该账号已存在"
                    else if (res.code == 1) {
                        hit.innerHTML = "账号注册成功，两秒后自动刷新页面"
                        setTimeout("window.location.reload()", 2000)
                    }
                })
            }
            hint()
        }
    }

    //登录按钮
    function login() {
        if (onoff) {
            var json = {
                "username": user.value,
                "password": passwd.value
            }
            $.ajax({
                type: 'POST',
                url: '/cl/doLogin',
                data: JSON.stringify(json),
                contentType: "application/json",
                method: "POST",
                success: function (data) {
                    if (data.code == 1) {
                        hit.innerHTML = "登陆成功，两秒后跳转至首页";
                        setTimeout("window.location.href='/cl/firstpage'", 2000);
                    } else {
                        hit.innerHTML = "用户名或密码错误";
                    }
                    hint()
                }
            })

        } else {
            var status = document.getElementById("status").getElementsByTagName("i");
            nickname.style.display = "none";
            confirm.style.height = 0;
            status[0].style.top = 0;
            status[1].style.top = 35 + "px";
            onoff = !onoff
            /*var status = document.getElementById("status").getElementsByTagName("i")
            confirm.style.height = 0
            status[0].style.top = 0
            status[1].style.top = 35 + "px"
            onoff = !onoff*/
        }
    }

</script>
</html>
